<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>研学请假系统</title>

    <link rel="stylesheet" href="index.css"> 
    <link rel="stylesheet" href="infor.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="whole_wrapper">
        <div class="top">
            <div class="welcome">欢迎使用本请假系统！</div>
            <div class="user">
                <div id="avatar">
                    <img src="https://typora-dream.oss-cn-beijing.aliyuncs.com/avatar.png">
                    <div id="user_event">注销</div>
                </div>
                <div id="user_name"><span id="user_infomation" style="font-size: 14px;">全栈-七期-褚宇鑫</span></div>
            </div>
        </div>
        <div class="main">
            <dialog>
                <h1>请假成功</h1>
                <button id="close_dialog">关闭</button>
            </dialog>
            <div id="director">
                <div class="logo">
                    <img src="https://typora-dream.oss-cn-beijing.aliyuncs.com/yundinglogo.png">
                </div>
                <div class="director_item">首页</div>
                <div class="director_item">请假</div>
                <div class="director_item">调研学</div>
                <div class="director_item">个人信息</div>
                <div class="director_item">关于我们</div>
            </div>
            <div class="banner">
                <div class="banner_item">
                    <div class="words">
                        <img src="https://typora-dream.oss-cn-beijing.aliyuncs.com/words.png">
                    </div>
                </div>
                <div class="banner_item">
                    <div class="content">
                        <div class="content_top">
                            <p style="color: white;">请假系统为您开放！</p>
                            <div class="btn">
                                <a href="javascript:;" id="leave_record">
                                    <img src="image/1.png" alt=""><span>已请假<span style="color: red;">0</span>次</span>
                                </a>
                                <a href="#" id="leave_log">
                                    <img src="image/6.png" alt=""><span>请假历史</span>
                                </a>
                            </div>
                        </div>
                        <div class="content_main">
                            <div class="leave_name">
                                <img src="image/8.png" alt=""><span>申请人</span>
                                <input type="text" id="leave_info">
                            </div>
                            <div class="leave_message">
                                <img src="image/3.png" alt="">
                                <span>性别</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                <img src="image/9.png" alt="">
                                <span>方向</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="全栈">全栈</option>
                                    <option value="Java">Java</option>
                                    <option value="人工智能">人工智能</option>
                                    <option value="CPU&OS">CPU & OS</option>
                                    <option value="设计">设计</option>
                                    <option value="秘书处">秘书处</option>
                                </select>
                                <img src="image/4.png" alt="">
                                <span>期次</span>
                                <select name="" id="leave_info">
                                    <option selected disabled></option>
                                    <option value="六">六</option>
                                    <option value="七">七</option>
                                    <option value="八">八</option>
                                </select>
                            </div>
                            <div class="leave_time">
                                <img src="image/7.png" alt="">
                                <span>请假时间</span>
                                <input type="text" placeholder="年-月-日" id="leave_info">
                                <select name="" id="leave_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
    
                            </div>
                            <div class="leave_cause">
                                <img style="vertical-align:top;" src="image/5.png" alt="">
                                <label style="vertical-align:top;">请假理由</label>
                                <textarea name="" id="leave_info" cols="70" rows="3"></textarea>
                            </div>
                            <div class="leave_btn"><button>提交</button></div>
                        </div>
                    </div>
                    <div class="wrapper">
                        <div class="banner_top">
                            <div class="back_btn" id="back_btn"><img src="image/backbtn.png" alt="">返回</div>
                            <div class="detail">
                                <input id="name1" type="text" placeholder="输入名字发起搜索">
                                <button id="search1">搜索</button>
                                <div class="history"><img src="https://s2.loli.net/2023/02/03/QjUeVA4XqZgaG9p.png"  style="width:16px;height: 16px;"><span id="history1" style="cursor: pointer;">本周历史</span></div>
                            </div>
                        </div>
                        <div class="banner_hidden">
                            <p>还没有请假记录哦~~</p>
                        </div>
                        <div class="banner_table">
                            <table>
                                <colgroup>
                                    <col class="col1">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col3">
                                </colgroup>
                                <tr>
                                    <th>姓名</th>
                                    <th class="fangxiang">方向<div class="fx1">
                                        <select id="f1">
                                            <option style='display: none'></option>
                                            <option value="秘书处">秘书处</option>
                                            <option value="设计">设计</option>
                                            <option value="AI">AI</option>
                                            <option value="CPU&OS">CPU&OS</option>
                                            <option value="Java">Java</option>
                                            <option value="全栈">全栈</option>
                                        </select>
                                    </div></th>
                                    <th class="qishu">期数<div class="fx2">
                                        <select id="f2">
                                            <option style='display: none'></option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">请假时间<div class="fx3">
                                        <select id="f3">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th>请假理由</th>
                                </tr>
                            </table>
                            <div class="tb_wrapper1">
                                <table>
                                    <colgroup>
                                        <col class="col1">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col3">
                                    </colgroup>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="banner_item">
                    <div class="content">
                        <div class="content_top">
                            <p style="color: white;">调研学系统为您开放！</p>
                            <div class="btn">
                                <a href="javascript:;" id="adjust_record">
                                    <img src="image/1.png" alt=""><span>已调整<span style="color: red;">0</span>次</span>
                                </a>
                                <a href="javascript:;" id="adjust_log">
                                    <img src="image/6.png" alt=""><span>调整历史</span>
                                </a>
                            </div>
                        </div>
                        <div class="content_main">
                            <div class="adjust_name">
                                <img src="image/8.png" alt=""><span>申请人</span>
                                <input type="text" id="adjust_info">
                            </div>
                            <div class="adjust_message">
                                <img src="image/3.png" alt="">
                                <span>性别</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                <img src="image/9.png" alt="">
                                <span>方向</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="全栈">全栈</option>
                                    <option value="Java">Java</option>
                                    <option value="人工智能">人工智能</option>
                                    <option value="CPU&OS">CPU & OS</option>
                                    <option value="设计">设计</option>
                                    <option value="秘书处">秘书处</option>
                                </select>
                                <img src="image/4.png" alt="">
                                <span>期次</span>
                                <select name="" id="adjust_info">
                                    <option selected disabled></option>
                                    <option value="六">六</option>
                                    <option value="七">七</option>
                                    <option value="八">八</option>
                                </select>
                            </div>
                            <div class="adjust_time">
                                <img src="image/7.png" alt="">
                                <span>申请时间</span>
                                <input type="text" placeholder="年-月-日" id="adjust_info">
                                <select name="" id="adjust_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
                            </div>
                            <div class="adjust_time">
                                <img src="image/2.png" alt="">
                                <span>调整时间</span>
                                <input type="text" placeholder="年-月-日" id="adjust_info">
                                <select name="" id="adjust_info" style="margin-right: 0px;">
                                    <option selected disabled></option>
                                    <option value="一">一</option>
                                    <option value="二">二</option>
                                    <option value="三">三</option>
                                    <option value="四">四</option>
                                </select><span>节</span>
    
                            </div>
                            <div class="adjust_cause">
                                <img style="vertical-align:top;" src="image/5.png" alt="">
                                <label style="vertical-align:top;">申请理由</label>
                                <textarea name="" id="adjust_info" cols="70" rows="3"></textarea>
                            </div>
                            <div class="leave_btn"><button>提交</button></div>
                        </div>
                        
    
                    </div>
                    <div class="wrapper">
                        <div class="banner_top">
                            <div class="back_btn" id="back_btn" style="cursor: pointer;"><img src="image/backbtn.png" alt="">返回</div>
                            <div class="detail">
                                <input id="name2" type="text" placeholder="输入名字发起搜索">
                                <button id="search2">搜索</button>
                                <div class="history"><img src="https://s2.loli.net/2023/02/03/QjUeVA4XqZgaG9p.png"  style="width:16px;height: 16px;"><span id="history2" style="cursor: pointer;">本周历史</span></div>
                            </div>
                        </div>
                        <div class="banner_hidden">
                            <p>还没有请假记录哦~~</p>
                        </div>
                        <div class="banner_table">
                            <table>
                                <colgroup>
                                    <col class="col1">
                                    <col class="col4">
                                    <col class="col4">
                                    <col class="col2">
                                    <col class="col2">
                                    <col class="col3">
                                </colgroup>
                                <tr>
                                    <th>姓名</th>
                                    <th class="fangxiang">方向<div class="fx1">
                                        <select id="f4">
                                            <option style='display: none'></option>
                                            <option value="秘书处">秘书处</option>
                                            <option value="设计">设计</option>
                                            <option value="AI">AI</option>
                                            <option value="CPU&OS">CPU&OS</option>
                                            <option value="Java">Java</option>
                                            <option value="全栈">全栈</option>
                                        </select>
                                    </div></th>
                                    <th class="qishu">期数<div class="fx2">
                                        <select id="f5">
                                            <option style='display: none'></option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">研学时间<div class="fx3">
                                        <select id="f6">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th class="shijian">调整时间<div class="fx4">
                                        <select id="f7">
                                            <option style='display: none'></option>
                                            <option value="第一节">第一节</option>
                                            <option value="第二节">第二节</option>
                                            <option value="第三节">第三节</option>
                                            <option value="第四节">第四节</option>
                                        </select>
                                    </div></th>
                                    <th>请假理由</th>
                                </tr>
                            </table>
                            <div class="tb_wrapper2">
                                <table>
                                    <colgroup>
                                        <col class="col1">
                                        <col class="col4">
                                        <col class="col4">
                                        <col class="col2">
                                        <col class="col2">
                                        <col class="col3">
                                    </colgroup>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="banner_item">
                    <div class="content"></div>
                    <div class="wrapper"></div>
                </div>
                <div class="banner_item">
                    <div class="content">
                        <div class="banner_item0">
                            <div class="banner_left"> 
                                <div class="banner_left_center">
                                    <p>云顶展</p>                    
                                    <div class="banner_left_center_text"><span>云顶介绍</span>：云顶书院（简称云顶），是以价值引领、能力培养、工程实践为导向的梯级递进和多维赋能的学习型组织，位于太原理工大学“数港”和“逸庐”双创基地，是中国高校第一所探索新书院制建设的“实验田”。创建于2015年，前身为高航老师创建的“互联网+实验室”，2016年9月更名为“云顶团队”。</div>
                                    <div class="banner_left_center_text"><span>方向介绍</span>：目前云顶书院有三大方向，分别为开发、设计、秘书处。开发方向的学员,会接受开发方向的学习任务,进行一些实战。适应期后,书院会为学员们分方向,开发方向的学员们可以选择的方向有:人工智能、CPU&0S、全栈、Java，进行系统地计算机硬件软件学习。云顶书院设计方向主要负责书院项目界面设计,海报,书签等宣传物制作以及web网页设计等。秘书处主行政，将对学员进行基础公软件的熟练操作培养,学习新闻撰稿,公众号推文排版,并逐步参与书院日常管理体系。</div>
                                    <div class="banner_left_center_text"><sapn>选拔模式</sapn>：“多元选拔，滚动淘汰”云顶书院每学年面向大一新生中不分专业择优选拔一次。生源遴选以申请、推荐、考核结合的方式进行。在学员培养过程中，云顶书院强调以严格的阶段性考核实现动态进出。除每学年由云顶院主导进行的常规考核外，极客团和创客团也不定期对学员的学习、工作情况进行科学评估，评估及考核的指标体系侧重过程性、实战化，考核结果决定学员的去留。每年从报名的4000人中筛选500人再到100人，无论是前期饥饿营销式选拔，还是后期学生民主投票决定去留，云顶书院最看重的，第一是品格，第二才是能力。</div>                
                                </div>
                                <div class="banner_left_bottom">
                                    <div class="banner_left_bottom1">
                                        <div class="banner_left_bottom1_1">
                                            <div class="icon1"></div>
                                            <div class="tele">联系电话 ***********</div>
                                        </div>
                                        <div class="banner_left_bottom1_2">云顶书院官网</div>
                                        <div class="banner_left_bottom1_3">营业执照</div>
                                        <div class="banner_left_bottom1_4">商务合作</div>
                                        <div class="banner_left_bottom1_5">友情链接</div>
                                        <div class="banner_left_bottom1_6">意见反馈</div>
                                    </div>
                                    <div class="banner_left_bottom2">
                                        <div class="banner_left_bottom2_1">
                                            <div class="icon2"></div>                                                   
                                            <div class="tele">官方邮箱 ***********</div> 
                                         </div>                         
                                            <div class="banner_left_bottom2_2">代码托管平台官网</div>
                                        <div class="banner_left_bottom2_3">加入我们</div>
                                        <div class="banner_left_bottom2_4">用户协议</div>
                                        <div class="banner_left_bottom2_5">版权声明</div>
                                        <div class="banner_left_bottom2_6">投诉举报</div>                        
                                    </div>
                                </div>
                            </div>
                            <div class="banner_right">
                                <div class="banner_right_center1">极<br>目<br>星<br>辰<br>大<br>海<br>，</div>
                                <div class="banner_right_center2">振<br>翅<br>云<br>顶<br>之<br>上<br>。</div>
                            </div>
                        </div>
                           
                    </div>
                    <div class="wrapper"></div>
                </div>
                <!-- <div class="banner_item">
                    <div class="content"></div>
                    <div class="wrapper"></div>
                </div> -->
        </div>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.js"></script>
    <script>
        {
            var director_item=document.getElementsByClassName('director_item');
            var temp=0;
            var cn=true;
            var wrapper=document.getElementsByClassName('wrapper');
            var content=document.getElementsByClassName('content');
            var banner_item=document.getElementsByClassName('banner_item');
            var avatar=document.getElementById('avatar');
            var user_event=document.getElementById('user_event');
            var whole_wrapper=document.getElementById('whole_wrapper');
        }
        //初始化
        director_item[temp].style.backgroundColor='#2F4399';
        banner_item[temp].style.display='block';
        document.getElementById("director").addEventListener("click",(event)=>{
            if([...director_item].includes(event.target)){
                director_item[temp].style.backgroundColor='transparent';
                banner_item[temp].style.display='none';
                if(temp!==0){
                    wrapper[temp-1].style.opacity=0;
                    content[temp-1].style.opacity=0;
                }
                event.target.style.backgroundColor='#2F4399';
                temp=[...director_item].indexOf(event.target);
                banner_item[temp].style.display='block';
                switch(temp){
                    case 0:
                        whole_wrapper.style.background='url(https://typora-dream.oss-cn-beijing.aliyuncs.com/background1.png)';
                        break;
                    case 1:
                        whole_wrapper.style.background='url(https://typora-dream.oss-cn-beijing.aliyuncs.com/background2.png)';
                        break;
                    case 2:
                        whole_wrapper.style.background='url(https://typora-dream.oss-cn-beijing.aliyuncs.com/background3.png)';
                        break;
                    case 3:
                        whole_wrapper.style.background='url(https://typora-dream.oss-cn-beijing.aliyuncs.com/bgd4.png)';
                        window.location.href='../information/personalInformation.html';
                        break;
                    case 4:
                        whole_wrapper.style.background='url(https://typora-dream.oss-cn-beijing.aliyuncs.com/background1.png)';
                        break;
                }
                if(temp!==0){
                    setTimeout(()=>{
                        wrapper[temp-1].style.opacity=1;
                        content[temp-1].style.opacity=1;
                    },100);
                }
            }
        });
    </script>
    <script src="index.js"></script>
    <script src="getRecord.js"></script>
    
    <script>
        avatar.onclick=function(){
            if(cn){
                user_event.style.display='block';
                cn=false;
            }else{
                user_event.style.display='none';
                cn=true;
            }
        };
    </script>
    
</body>
</html>